<script lang="ts">
export default {
    name: 'ArticleAdd'
}
</script>

<script setup lang="ts">
import useBaseModel from '@/composables/cms/article/useBaseModel';
import useArticleAdd from '@/composables/cms/article/useArticleAdd';
import WangEditor from '@/components/WangEditor/index.vue'

// 基础数据
const { addModel, rules } = useBaseModel()

const { formTitle, editorContent, headerObj, uploadUrl, addArticleForm, treeData, tagData, handleImgSuccess, beforeImgUpload, close, save } = useArticleAdd(addModel)

</script>
<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>{{ formTitle }}</span>
            </div>
        </template>
        <el-form :model="addModel" ref="addArticleForm" :rules="rules" label-width="100px">
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="title" label="文章标题">
                        <el-input v-model="addModel.title"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="key_word" label="短标题">
                        <el-input v-model="addModel.key_word"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="category_id" label="分类">
                        <el-tree-select v-model="addModel.category_id" node-key="id" :data="treeData.data"
                            check-strictly />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="tag" label="标签">
                        <el-checkbox-group v-model="addModel.tag">
                            <el-checkbox v-for="item in tagData.data" :key="item.id" :label="item.id">{{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="status" label="状态">
                        <el-radio-group v-model="addModel.status">
                            <el-radio label="1">正常</el-radio>
                            <el-radio label="2">停用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="img" label="横图">
                        <el-upload class="wave-uploader" :action="uploadUrl" :show-file-list="false"
                            :on-success="handleImgSuccess" :before-upload="beforeImgUpload" :headers="headerObj">
                            <input type="hidden" v-model="addModel.img" />
                            <img v-if="addModel.img" :src="addModel.img" class="wave-img" />
                            <el-icon v-else class="wave-uploader-icon">
                                <Plus />
                            </el-icon>
                            <template #tip>
                                <div class="el-upload__tip">
                                    支持JPG、PNG格式的图片，大小不能超过4MB。
                                </div>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="description" label="描述">
                        <el-input v-model="addModel.description" type="textarea"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="content" label="内容">
                        <WangEditor :editorValue="addModel.content" @inputContent="editorContent"></WangEditor>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item>
                        <el-button @click="close()">关闭</el-button>
                        <el-button type="primary" @click="save()">保存</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
</template>
<style lang="scss" scoped>
</style>
